<template>
	<view class="container">
		<!-- 头部 -->
		<view>
			<carHeader title="应急救援"></carHeader>
		</view>
		<!-- 地图 -->
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 90%; height: 430rpx; margin-top: -60rpx; margin: 0 auto; position: absolute; left: 35rpx; top: 38rpx;"
					:latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
		<!-- 横向导航栏 -->
		<view class="dh">
			<view class="navbar">
				<view class="nav-item" v-for="(form, index) in forms" :key="index"
					:class="{'active': selectedFormIndex === index}" @click="selectForm(index)">
					{{ form.title }}
				</view>
			</view>
			<!-- 表单区域 -->
			<view v-for="(form, index) in forms" :key="index" v-if="selectedFormIndex === index">
				<form>
					<view v-if="index===2" class="view1">
						<view class="itext">起点
						</view>
						<view><input class="input" type="text" placeholder="请输入起点位置" /></view>
					</view>

					<view v-if="index===2" class="view1">
						<view class="itext">终点
						</view>
						<view><input class="input" type="text" placeholder="请输入终点位置" /></view>
					</view>

					<view v-if="index==0" class="view1">
						<view class="itext">位置
						</view>
						<view><input class="input" type="text" placeholder="请输入当前位置" /></view>
					</view>

					<view class="view1">
						<view class="itext">求助人
						</view>
						<view><input class="input" type="text" placeholder="请输入求助人名字" /></view>
					</view>

					<view class="view1">
						<view class="itext">联系方式
						</view>
						<view><input class="input" type="text" placeholder="请输入你的联系方式" /></view>
					</view>

					<view class="view1">
						<view class="itext">车牌
						</view>
						<view><input class="input" type="text" placeholder="请输入你的车牌号" /></view>
					</view>

					<view class="view11">
						<view class="itext">描述
						</view>
						<view class="uni-textarea"><textarea type="text" placeholder="请描述当前状况及所需帮助" /></view>
					</view>
					<view class="nu">
						<button class="btn" type="warn">呼叫救援</button>
					</view>
					<view class="jy">
						<view class="jl">救援记录 ></view>
					</view>
				</form>
			</view>
		</view>
		<!-- 警务救援 -->
		<view class="jt">
			<view class="jw">警务救助</view>
			<view class="help-item" v-for="(item, index) in helpList" :key="index">
				<view>
					<image :src="item.image" class="help-image"></image>
				</view>
				<view>
					<text class="help-name">{{ item.name }}</text>
				</view>
				<view>
					<text class="help-phone">{{ item.phone }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}],
				// 假设有三个表单
				forms: [{
						title: '搭电'
					},
					{
						title: '换胎'
					},
					{
						title: '拖车'
					}
				],
				helpList: [{
						image: "../../static/车联网服务-02应急救援 -01拖车_slices/交通事故 拷贝.png",
						name: "交通事故",
						phone: "122"
					}, {
						image: "../../static/车联网服务-02应急救援 -01拖车_slices/火警.png",
						name: "火警",
						phone: "119"
					}, {
						image: "../../static/车联网服务-02应急救援 -01拖车_slices/急救包.png",
						name: "急救中心",
						phone: "120"
					},
					{
						image: "../../static/车联网服务-02应急救援 -01拖车_slices/警察,公安.png",
						name: "公安报警",
						phone: "110"
					}
				],
				selectedFormIndex: 0 // 控制当前显示的表单索引
			}
		},
		methods: {
			selectForm(index) {
				this.selectedFormIndex = index; // 更新当前选中的表单索引  
			}
		}
	}
</script>

<style>
	.container {
		background-color: #eaeaea;
	}

	.page-body {
		margin: 0 auto;
		position: relative;
		display: flex;
		justify-content: space-around;
		/* 或者使用其他布局方式 */
		border-radius: 5%;
		background-color: white;
		width: 95%;
		margin: 0 auto;
		height: 500rpx;
		top: -200rpx;
	}

	/* 导航栏区域 */
	.dh {
		margin: 0 auto;
		border-radius: 5%;
		background-color: white;
		width: 95%;

		position: relative;
		top: -180rpx;
	}

	.navbar .nav-item.active {
		color: aqua;
	}

	.navbar {

		display: flex;
		justify-content: space-around;
		border-radius: 5%;
		background-color: white;
		width: 95%;
		margin: 0 auto;
	}

	.view1 {
		padding-top: 25rpx;
		margin: 0 auto;
		width: 95%;
		height: 120rpx;
		background-color: white;
		box-sizing: border-box;

	}

	.view11 {
		padding-top: 25rpx;
		margin: 0 auto;
		width: 95%;
		height: 190rpx;
		background-color: white;
		box-sizing: border-box;
	}

	.itext {
		margin-left: 20rpx;
		margin-right: 20rpx;
		float: left;
		background-color: #4FA2FF;
		width: 140rpx;
		height: 50rpx;
		border-radius: 15rpx;
		text-align: center;
		color: white;
	}

	.input {
		border: 1rpx solid gray;
		width: 70%;
		height: 50rpx;
		border-radius: 16rpx;
		/* font-size: 20rpx; */
	}

	.uni-textarea {
		margin-left: 180rpx;
		border: 1rpx solid gray;
		width: 70%;
		height: 150rpx;
		border-radius: 16rpx;
		
	}

	.nu {
		position: relative;
		width: 70%;
		border-radius: 16rpx;
		margin: 0 auto;
	}

	.jy {
		width: 50%;
		margin: 0 auto;
	}

	.jl {
		text-align: center;
		color: gray;
	}

	/* 警务救援 */
	.jt {
		box-sizing: border-box;
		position: relative;
		width: 95%;
		margin: 0 auto;
		background-color: white;
		height: 260rpx;
		top: -150rpx;
		border-radius: 25rpx;

	}

	.jw {
		padding-top: 20rpx;
		margin-left: 20rpx;
		font-size: 35rpx;
		font-weight: bold;
	}

	.help-item {
		margin-top: 15rpx;
		position: relative;
/* 		border: 1rpx solid red; */
		float: left;
		width: 24%;
		margin-bottom: 20px;
		text-align: center;
	}

	.help-image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10px;
	}
</style>